<!--<template>-->
<!--  <div id="access"-->
<!--       style="background-image: url('/static/background/background.png'); min-height: 99vh; position: relative;">-->
<!--    <div id="tableContainer" style="position: absolute; top: 20px; left: 50px; right: 50px;">-->
<!--      <el-row>-->
<!--        <el-col :span="8">-->
<!--          <div class="class1">-->
<!--            <span class="class2">-->
<!--              <i class="el-icon-star-off"></i> 资源利用率</span>-->
<!--            <el-row>-->
<!--              <el-col :span="12">-->
<!--                <div style="height: 25vh;" id="id10"></div>-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <div style="height: 25vh;" id="id12"></div>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--          <div class="class1">-->
<!--            <span class="class2"><i class="el-icon-help"></i> 成本透明化治理</span>-->
<!--            <div style="height: 25vh;" id="id11"></div>-->
<!--          </div>-->
<!--          <div class="class1">-->
<!--            <span class="class2"><i class="el-icon-goods"></i> 数据合规治理</span>-->
<!--            &lt;!&ndash; :header-cell-style="{ background: 'transparent', color: '#606266' }" &ndash;&gt;-->
<!--            <div class="class6">-->
<!--              <el-table-->
<!--                :header-cell-style="{ background: 'transparent', color: '#606266' }"-->
<!--                element-loading-background="rgba(255, 255, 255, 0.8)"-->
<!--                :data="tableData" border-->
<!--                style="width: 85%; margin-left: 30px; margin-top: 10px; margin-right: 10px;">-->
<!--                <el-table-column prop="prop1" label="云商-资源"/>-->
<!--                <el-table-column prop="prop2" label="使用量"/>-->
<!--                <el-table-column prop="prop3" label="剩余量"/>-->
<!--                <el-table-column prop="prop4" label="总量"/>-->
<!--              </el-table>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <div class="class1">-->
<!--            <div class="class2" style="margin-left: 0px;"><i class="el-icon-data-board"></i> 云商评价</div>-->
<!--            <div class="scrollable-div">-->
<!--              <div v-for="item in evaluate" style=-->
<!--                "border-width: 2px;-->
<!--               border-color: white;-->
<!--               border-style: solid;-->
<!--               border-radius: 15px;-->
<!--               margin-top: 6px;-->
<!--               ">-->
<!--                &lt;!&ndash; height: 20vh; &ndash;&gt;-->
<!--                <el-row>-->
<!--                  <el-col :span="6">-->
<!--                    <span style="font-size: 40px; color: greenyellow; margin-left: 20px;">{{ item.score }}</span>-->
<!--                    &lt;!&ndash; <el-tag effect="plain" size="mini" style="margin-bottom:20px">阿里</el-tag> &ndash;&gt;-->
<!--                    <div class="class5">同比： 20%<i style="color: red" class="el-icon-top"></i></div>-->
<!--                    <div class="class5">环比： 20%<i style="color: red" class="el-icon-top"></i></div>-->
<!--                    <div class="class5">同行：-10%<i style="color: green" class="el-icon-bottom"></i></div>-->
<!--                  </el-col>-->
<!--                  <el-col :span="18">-->
<!--                    <el-row>-->
<!--                      <el-col style="margin-top: 10px; margin-bottom: 10px; " :span="12">-->
<!--                        <span class="class3">资源用量</span>-->
<!--                        <span ref="barChart" data-peity='{ "fill": ["#4caf50"], "padding": 0.2 }'>{{item.data1}}</span>-->
<!--                      </el-col>-->
<!--                      <el-col style="margin-top: 10px; margin-bottom: 10px; " :span="12">-->
<!--                        <span class="class3">平均费用</span>-->
<!--                        <span class="updating-chart">{{item.data2}}</span>-->
<!--                      </el-col>-->
<!--                      <el-col style="margin-top: 10px; margin-bottom: 10px; " :span="12">-->
<!--                        <span class="class3">履约情况</span>-->
<!--                        <span class="bar">{{item.data3}}</span>-->
<!--                      </el-col>-->
<!--                      <el-col style="margin-top: 10px; margin-bottom: 10px; " :span="12">-->
<!--                        <span class="class3">质量评价</span>-->
<!--                        <span class="bar">{{item.data4}}</span>-->
<!--                      </el-col>-->
<!--                      <el-col style="margin-top: 10px; margin-bottom: 10px; " :span="12">-->
<!--                        <span class="class3">违约次数</span>-->
<!--                        <span class="bar">{{item.data5}}</span>-->
<!--                      </el-col>-->
<!--                      <el-col style="margin-top: 10px; margin-bottom: 10px; " :span="12">-->
<!--                        <span class="class3">违规次数</span>-->
<!--                        <span class="bar">{{item.data6}}</span>-->
<!--                      </el-col>-->
<!--                    </el-row>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <div class="class1">-->
<!--            <div class="class2"-->
<!--                 style="margin-left: 18px;"-->
<!--            ><i class="el-icon-goods"></i> 性能策略治理</div>-->
<!--            <div class="class4">[达成率]文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案</div>-->
<!--            <el-row>-->
<!--              <el-col :span="8">-->
<!--                <div style="height: 20vh;" id="id1"></div>-->
<!--              </el-col>-->
<!--              <el-col :span="8">-->
<!--                <div style="height: 20vh;" id="id2"></div>-->
<!--              </el-col>-->
<!--              <el-col :span="8">-->
<!--                <div style="height: 20vh;" id="id3"></div>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--          <div class="class1">-->
<!--            <div class="class2"-->
<!--                 style="margin-left: 18px;"-->
<!--            ><i class="el-icon-goods"></i> 服务质量改进</div>-->
<!--            <div class="class4">[评分]文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案</div>-->
<!--            <el-row>-->
<!--              <el-col :span="24">-->
<!--                <div style="height: 24vh;" id="id4"></div>-->
<!--              </el-col>-->
<!--              &lt;!&ndash; <el-col :span="8">-->
<!--                <div style="height: 20vh;" id="id5"></div>-->
<!--              </el-col>-->
<!--              <el-col :span="8">-->
<!--                <div style="height: 20vh;" id="id6"></div>-->
<!--              </el-col> &ndash;&gt;-->
<!--            </el-row>-->
<!--          </div>-->
<!--          <div class="class1">-->
<!--            <div class="class2"-->
<!--                 style="margin-left: 18px;"-->
<!--            ><i class="el-icon-goods"></i> 持续改进治理</div>-->
<!--            <div class="class4">[反馈]文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案文案</div>-->
<!--            <el-row>-->
<!--              <el-col :span="8">-->
<!--                <div style="height: 20vh;" id="id7"></div>-->
<!--              </el-col>-->
<!--              <el-col :span="8">-->
<!--                <div style="height: 20vh;" id="id8"></div>-->
<!--              </el-col>-->
<!--              <el-col :span="8">-->
<!--                <div style="height: 20vh;" id="id9"></div>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script src='./js/index.js'/>-->
<!--<style lang="scss">-->

<!--/* 设置div的大小和滚动属性 */-->
<!--.scrollable-div {-->
<!--  // width: 300px;-->
<!--  height: 80vh;-->
<!--  overflow: auto; /* 开启滚动条 */-->
<!--}-->

<!--/* 隐藏滚动条的样式 */-->
<!--.scrollable-div::-webkit-scrollbar {-->
<!--  display: none; /* 对于Webkit浏览器，如Chrome和Safari，直接隐藏滚动条 */-->
<!--}-->

<!--.scrollable-div {-->
<!--  -ms-overflow-style: none; /* 对于IE和Edge，隐藏滚动条 */-->
<!--  scrollbar-width: none; /* 对于Firefox，隐藏滚动条 */-->
<!--}-->

<!--.class4 {-->
<!--  display: none;-->
<!--  color: grey;-->
<!--  //color: rgb(135, 206, 250);-->
<!--  font-size: 14px;-->
<!--  margin-left: 18px;-->
<!--}-->

<!--.class5 {-->
<!--  color: rgb(255, 255, 255);-->
<!--  font-size: 14px;-->
<!--  margin-left: 18px;-->
<!--}-->

<!--.class3 {-->
<!--  color: rgb(255, 255, 255);-->
<!--  font-size: 16px;-->
<!--  font-weight: 300;-->
<!--  // margin-left: 38px;-->
<!--}-->

<!--.class2 {-->
<!--  font-weight: 700;-->
<!--  // color: rgb(255, 255, 255);-->
<!--  color: #82CAFF;-->
<!--  font-size: 18px;-->
<!--  // margin-left: 18px;-->
<!--  margin-left: 30px;-->
<!--}-->


<!--.class1 {-->
<!--  height: 28vh;-->
<!--  border-width: 1px;-->
<!--  border-color: white;-->
<!--}-->

<!--/* 最外层透明 */-->
<!--.el-table, .el-table__expanded-cell {-->
<!--  background-color: transparent;-->
<!--}-->

<!--/* 表格内背景颜色 */-->
<!--.el-table th, .el-table tr, .el-table td {-->
<!--  background-color: transparent;-->
<!--}-->

<!--.custom-label-color .el-form-item__label {-->
<!--  color: #FFFFFF; /* 白色 */-->
<!--}-->

<!--::v-deep .el-form-item__label {-->
<!--  color: #FFFFFF; /* 白色 */-->
<!--}-->

<!--#access {-->

<!--  #expireNoteContainer {-->
<!--    width: 100%;-->
<!--    font-size: 35px;-->
<!--    padding-top: 25px;-->
<!--  }-->

<!--  .line {-->
<!--    align: center;-->
<!--    height: 1px;-->
<!--    background: #CED2DB;-->
<!--    overflow: hidden;-->
<!--    margin: 0 auto;-->
<!--  }-->

<!--  #tableContainer {-->
<!--    // border: 1px solid #B3BFD7;-->
<!--    margin: 0px auto 20px;-->
<!--    -moz-box-shadow: 4px 4px 2px #F1F1F3;-->
<!--  }-->

<!--  #userInfo_information {-->
<!--    margin: 0;-->
<!--    color: #8C95A6;-->
<!--    text-align: center;-->
<!--    padding: 18px 0 13px;-->
<!--    font-size: 24px;-->
<!--  }-->

<!--}-->


<!--.class6 {-->
<!--  //表格间距-->
<!--  // margin: 20px 50px 20px 50px;-->

<!--  .el-table&#45;&#45;mini .el-table__cell {-->
<!--  }-->

<!--  //整个表格背景颜色及边框弧度-->
<!--  .el-table {-->
<!--    background-color: rgba(38, 38, 38, 0);-->
<!--    border-radius: 3px;-->
<!--    border-color: white;-->
<!--  }-->

<!--  //字体颜色-->
<!--  .el-table tr {-->
<!--    background-color: transparent;-->
<!--    color: white;-->
<!--  }-->

<!--  .el-table th.el-table__cell.is-leaf {-->
<!--    border-bottom: 1px solid rgba(255, 255, 255, 0.8);-->
<!--  }-->

<!--  //标题背景颜色-->
<!--  .el-table th {-->
<!--    background-color: rgba(150, 150, 150, 0.26) !important;-->
<!--    font-size: 11pt;-->
<!--  }-->

<!--  //标题字体颜色-->
<!--  .el-table th .cell {-->
<!--    color: #ffffff;-->
<!--    font-size: 11pt;-->
<!--    height: 19px-->
<!--  }-->

<!--  //去除行下划线-->
<!--  .el-table td {-->
<!--    border-color: rgba(255, 255, 255, 0.2);-->
<!--    font-size: 11pt;-->
<!--  }-->

<!--  //修改鼠标滑过背景颜色-->
<!--  .el-table&#45;&#45;enable-row-hover .el-table__body tr:hover td {-->
<!--    background-color: rgba(38, 38, 38, 0.5) !important;-->
<!--    color: white !important;-->
<!--  }-->
<!--}-->
<!--</style>-->
